<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>反馈建议</title>
@include('common-css')
<style>

.input_box {
    width: 100%;
    height: 40px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.input_label {
    width: 120px;
    box-sizing: border-box;
}

.project-table {
    margin-top: 15px;
}

.status-tag {
    color: #1890ff;
    border: 1px solid #91d5ff;
    border-radius: 3px;
    background: #e6f7ff;
    font-size: 12px;
    padding: 2px 3px;
}

.ant-table-tbody > tr > td, .ant-table-thead > tr > th {
    vertical-align: middle;
    line-height: 25px;
}

.search_box {
    width: 1000px;
}

.search_box input {
    width: 300px;
}

.search_box button {
    margin-left: 20px;
}

.search_box .ant-select {
    margin-left: 20px;
}

.expert-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    border-radius: 4px 4px 0 0;
}

.expert-table > tr > th {
    vertical-align: middle;
    line-height: 25px;
    padding: 16px;
    background: #fafafa;
    -webkit-transition: background .3s ease;
    transition: background .3s ease;
    text-align: center;
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
    border-bottom: 1px solid #e8e8e8;
}

.expert-table > tr > td {
    padding: 8px;
    line-height: 25px;
    vertical-align: middle;
    text-align: center;
}

.inner-table {
    width: 100%;
    border-collapse: collapse;
}

.inner-table th {
    font-weight: bold;
    color: #888;
    padding: 6px 3px;
    text-align: center;
    border: 1px solid #eee;
    vertical-align: middle;
    font-size: 12px;
}

.inner-table td {
    border: 1px solid #eee;
    padding: 6px 3px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
}

.delete-btn-a {
    color: #f5222d
}

.feedback_common_content {
    width: calc(100% - 260px);
}
</style>
</head>
<body>

<div id="app"></div>

<script id="appTemplate" type="x-template">
<a-locale-provider :locale="antdLocale">
    <div class="container">

        @include('review.header-tpl')

        <main>
            <div class="common_container">

                @include('review.aside-tpl')

                <div class="common_content feedback_common_content">

                    <a-textarea style="max-width: 600px;" ref="feedbackTextarea" v-model="feedbackContent" :rows="8"
                                placeholder="在此处填写您的意见和建议"/>

                    <div>
                        <a-button style="margin-top: 10px;" type="primary" @click="handleFeedbackSubmit">提交</a-button>
                    </div>

                </div>
            </div>
        </main>
    </div>
</a-locale-provider>
</script>

@include('common-js')
@include('review.header-js')
@include('review.aside-js')

<script>
var queryParams = parseUrl(location.href).params

</script>
<script>
var app = new Vue({
    el: '#app',
    template: '#appTemplate',
    data: {
        feedbackContent: '',

        queryParams,

        asideSelectedKeys: [queryParams.aside_key],
        antdLocale: antd.locales.zh_CN,
        ...ReviewHeader.data,
        ...Workflow.data,
    },
    computed: {},
    mounted() {
        this.focusFeedbackTextarea()
    },
    methods: {
        handleFeedbackSubmit() {
            if (!this.feedbackContent) {
                return
            }
            axios.post('/api/review/submit-feedback', {
                content: this.feedbackContent
            }).then(response => {
                if (response.data.ok) {
                    success('反馈成功，感谢您的支持！')
                }
            })
        },
        focusFeedbackTextarea() {
            this.$refs.feedbackTextarea.$refs.textArea.focus()
        },
        ...ReviewHeader.methods,
        ...Workflow.methods,
    }
})
</script>
</body>
</html>